<template>
  <div>
    <input class="seach" type="text" placeholder="搜索物品" />
    <div class="left">
      <ul class="ul">
        <li
          v-bind:class="{ yanse: index == tabindex }"
          @click="yanse(index)"
          v-for="(value, index) in arrNew"
          :key="index"
        >
          {{ value }}
        </li>
      </ul>
    </div>
    <div class="right">
      <ul class="youd">
        <li class="you" v-for="(value, index) in arr" :key="index">
          <img :src="value.icon" alt="" />
          {{ value.name }}
        </li>
      </ul>
    </div>
    <ul class="mowe">
      <router-link tag="li" to="/shouye"> 首页</router-link>
      <router-link tag="li" to="/fenlei"> 分类</router-link>
      <router-link tag="li" to="/gouwuche"> 购物车</router-link>
      <router-link tag="li" to="/geren"> 个人</router-link>
    </ul>
  </div>
</template>
<style scoped>
.mowe {
  width: 100%;
  height: 2rem;
  font-size: 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mowe li{
    text-align: center;
}
* {
  margin: 0;
  padding: 0;
}
.left {
  float: left;
}
.right {
  float: left;
}
.seach {
  width: 100%;
  height: 1rem;
  outline: none;
  border: 1px solid #000;
  padding-left: 1rem;
  box-sizing: border-box;
}
.ul {
  width: 2rem;
  height: 10rem;
  border: 1px solid #000;
  padding-top: 0.2rem;
}
.ul li {
  text-align: center;
  line-height: 0.9rem;
  list-style: none;
  width: 100%;
  height: 0.9rem;
  font-size: 0.24rem;
  margin: 0;
}
.yanse {
  color: red;
  border-left: 3px solid red;
}
.youd {
  width: 5rem;
  height: 10rem;
  overflow: auto;
}
.you {
  float: left;
}
li {
  list-style: none;
  font-size: 0.2rem !important;
  text-align: center;
  margin: 0.1rem;
}
li img {
  width: 1.3rem;
  height: 1.3rem;
  display: block;
}
</style>
<script>
export default {
  data() {
    return {
      arr: [],
      arr2: [],
      arrNew: ["所有分类", "居家生活", "配件装饰", "新品服装", "日用电器"],
      arrNew2: [],
      tabindex: 0,
    };
  },
  methods: {
    yanse(index) {
      this.tabindex = index;
      if (index == 0) {
        this.axios("https://api.it120.cc/small4/shop/goods/category/all").then(
          (res) => {
            this.arr = res.data.data;
            this.arr2 = res.data.data;
          }
        );
      }
      if (index == 1) {
        this.arr = this.arr2;
        this.arrNew2 = [];
        this.arr.forEach((item) => {
          if (item.type.indexOf("jujia") != -1) {
            this.arrNew2.push(item);
          }
        });
        this.arr = this.arrNew2;
      }
      if (index == 2) {
        this.arr = this.arr2;
        this.arrNew2 = [];
        this.arr.forEach((item) => {
          if (item.type.indexOf("peishi") != -1) {
            this.arrNew2.push(item);
          }
        });
        this.arr = this.arrNew2;
      }
      if (index == 3) {
        this.arr = this.arr2;
        this.arrNew2 = [];
        this.arr.forEach((item) => {
          if (item.type.indexOf("fuzhuang2") != -1) {
            this.arrNew2.push(item);
          }
        });
        this.arr = this.arrNew2;
      }
      if (index == 4) {
        this.arr = this.arr2;
        this.arrNew2 = [];
        this.arr.forEach((item) => {
          if (item.type.indexOf("dianqi2") != -1) {
            this.arrNew2.push(item);
          }
        });
        this.arr = this.arrNew2;
      }
    },
  },
  mounted() {
    this.axios("https://api.it120.cc/small4/shop/goods/category/all").then(
      (res) => {
        this.arr = res.data.data;
        this.arr2 = res.data.data;
        console.log(res);
        console.log(this.arr);
      }
    );
  },
};
</script>
